<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色权限管理</title>
    <script type="text/javascript" src="/public/common.js"></script>
    <script type="text/javascript" src="/public/sose/js/checkViewPermissions.js"></script>
</head>
<body>
<div class="layout-body" id="role" v-cloak>
    <layout-header></layout-header>
    <div id="wrap">
        <layout-sider></layout-sider>
        <div class="layout-main">
            <!-- 多条件查询 -->
            <div class="qry">
                <div class="first">
                    <div class="juinline">
                        角色key:
                        <i-input class="select_input" v-model="sRole.roleKey" type="text"></i-input>
                        角色名称:
                        <i-input class="select_input" v-model="sRole.roleName" type="text"></i-input>
                    </div>
                    <div class="butRight">
                        <i-button type="primary" @click="filter">搜索</i-button>
                        <i-button @click="clearSRole">清空</i-button>
                    </div>
                    <div class="butRight-button">
                        <i-button type="info" shape="circle" @click="resetRedis">重置缓存</i-button>
                    </div>
                </div>
                <div class="butLeft">
                    <i-Button type="primary" @click="addRoleModal = true">新增角色</i-Button>
                    <i-button @click="openDisableRoleSelectModal">禁用</i-button>
                    <i-button @click="openRemoveRoleSelectModal">删除</i-button>
                </div>
            </div>
            <div>
                <!-- 表格 -->
                <i-table class="table" border height="auto" width="auto" size='small' tooltip-theme="light"
                         :columns="column" :data="nowData" :loading="loading" highlight-row="true"
                         @on-selection-change="onSelectionChange">
                    <template slot-scope="{ row, index }" slot="action">
                        <a class="table-a" @click="openEditRoleModal(index)">编辑角色 </a>
                        <a class="table-a" @click="getOwnMenuTree(index)">查看权限</a>
                        <a class="table-a" @click="getEditDataTree(index)" ref="indexData">编辑权限</a>
                    </template>
                </i-table>

                <div class="div-inline-left">
                    <span v-show="selection.length >0">已勾选 {{selection.length}} 条</span>
                </div>

                <div class="div-inline-right">
                    <!-- current:当前页码  total:数据总数  page-size:每页条数-->
                    <Page :current="pageNum" :total="totalNum" :page-size="pageSize"
                          @on-change="onPageChange" @on-page-size-change="onPageSizeChange"
                          show-total show-elevator show-sizer>
                    </Page>
                </div>
            </div>

            <!--查看权限模态框 -->
            <modal v-model="seeDataTreeModal" title="查看角色权限">
                <el-tree :data="ownMenuTree" empty-text="该角色暂无权限"
                         :mask-closable="false" :draggable="true"
                         default-expand-all></el-tree>
            </modal>

            <!-- 编辑权限模态框 -->
            <modal v-model="editDataTreeModal" title="编辑用户权限" @on-ok="editOk"
                   :mask-closable="false" @on-cancel="clearEdit">
                <el-tree :data="allMenuTree"
                         show-checkbox
                         node-key="id"
                         :default-checked-keys="ownMenuTreeIdList"
                         default-expand-all
                         :expand-on-click-node="false"
                         ref="editTree">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                     <span>{{ node.label }}</span>
                   </span>
                </el-tree>
            </modal>

            <!-- 新增模态框 -->
            <Modal v-model="addRoleModal" :mask-closable="false" @on-cancel="cancelAddRole">
                <p slot="header">
                    <span>新增角色信息</span>
                </p>
                <center>
                    <table>
                        <tr>
                            <td>角色key:</td>
                            <td>
                                <i-input class="input" v-model="role.roleKey" type="text"></i-input>
                            </td>
                        </tr>
                        <tr>
                            <td>角色名称:</td>
                            <td>
                                <i-input class="input" v-model="role.roleName" type="text"></i-input>
                            </td>
                        </tr>
                        <tr>
                            <td>角色描述:</td>
                            <td>
                                <el-input class="input" type="textarea" v-model.trim="role.description"
                                          maxlength="2000" :autosize="{minRows: 2,maxRows: 4}"
                                          show-word-limit></el-input>
                            </td>
                        </tr>

                    </table>
                </center>
                <div slot="footer">
                    <i-button type="text" size="large" @click="cancelAddRole">取消</i-button>
                    <i-button type="primary" size="large" @click="addRole">确定</i-button>
                </div>
            </Modal>

            <!-- 编辑模态框 -->
            <Modal v-model="editRoleModal" :mask-closable="false" @on-cancel="cancelEditRole">
                <p slot="header">
                    <span>编辑角色信息</span>
                </p>
                <center>
                    <table>
                        <tr>
                            <td>角色key:</td>
                            <td>
                                <i-input class="input" v-model="role.roleKey" type="text"></i-input>
                            </td>
                        </tr>
                        <tr>
                            <td>角色名称:</td>
                            <td>
                                <i-input class="input" v-model="role.roleName" type="text"></i-input>
                            </td>
                        </tr>
                        <tr>
                            <td>角色描述:</td>
                            <td>
                                <el-input class="input" type="textarea" v-model.trim="role.description"
                                          maxlength="2000" :autosize="{minRows: 2,maxRows: 4}"
                                          show-word-limit></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>状态:</td>
                            <td>
                                <el-radio-group v-model="role.enable">
                                    <el-radio-button :label=true>启用</el-radio-button>
                                    <el-radio-button :label=false>禁用</el-radio-button>
                                </el-radio-group>
                            </td>
                        </tr>

                    </table>
                </center>
                <div slot="footer">

                    <i-button type="text" size="large" @click="cancelEditRole">取消</i-button>
                    <i-button type="primary" size="large" @click="editRole">确定</i-button>
                </div>
            </Modal>

            <!-- 批量删除模态框 -->
            <Modal v-model="removeRoleSelectModal" title="批量删除角色信息"
                   @on-ok="removeRoleSelect">
                <p>确定删除当前 {{selection.length}} 条角色信息？</p>
            </Modal>

            <!-- 批量禁用模态框 -->
            <Modal v-model="disableRoleSelectModal" title="批量禁用角色信息"
                   @on-ok="disableRoleSelect">
                <p>确定禁用当前 {{selection.length}} 条角色信息？</p>
            </Modal>

        </div>
        <div style="clear:both"></div>
    </div>
    <layout-footer></layout-footer>
</div>
<script type="text/javascript" src="/templates/config/js/role.js"></script>
</body>
</html>